<script>
import Demo16 from './Demo16.vue'
import Demo15 from './Demo15.vue'
export default{
    components:{Demo16:Demo16,Demo15:Demo15},
    data()
    {
        return{
            //定义数据
            a:1,
            cou:0,
            list1:[1,2,3,4]
        }
    },
    methods:{
        push(){
            this.list1.push(this.a)
        }

    },
    beforeCreate(){
        //实例对象创建前
        console.log(this.cou)
        console.log('1 实例对象创建前:beforeCreate() -- 数据和方法未初始化',this.cou)
    },
    created(){
        //实例对象创建后
        console.log("2 实例对象创建后：create -- 数据和方法完成初始化",this.cou)
        
    },
    beforeMount(){
        //页面挂载前
        console.log("挂载前")
        console.log("3 页面挂载前：beforeMount -- 模版编译完成-Dom未挂载",document.getElementsByClassName("p1"))
    },
    mounted(){
        //页面挂载后
        console.log("挂载后")
         console.log("4 页面挂载后：Mounted -- 模版编译完成-Dom已挂载",document.getElementsByClassName("p1"))
    },
    beforeUpdate(){
        //组件更新前
        console.log("5: 组件更新前：beforeMountUpdate() 数据已经发生了变化 但是DOM元素还未更新",this.cou,document.getElementById('p1'));
    },
    updated(){
        //组件更新后
        console.log("6: 组件更新后：beforeMountUpdate() 数据已经发生了变化 但是DOM元素更新",this.cou,document.getElementById('p1'));
    },
    beforeDestroy(){
        //组件实例销毁前
        //组件即将被销毁仍然可以访问
        console.log("销毁前")
    },
    destroyed(){
        //组件实例销毁后
        console.log("销毁后")
    }

}
</script>
<template>
<h1>选项式生命周期函数-Demo14</h1>
<p class="p1">我是一个p1{{ cou}} <button @click="cou+=1">增加</button><button @click="cou-=1">减少</button></p> 
<input v-model="a"  @keyup.enter="push"/>
<p v-for="(item) in list1">{{item}}</p>
<Demo15/>
<Demo16/>

</template>
<style scoped>
/* 
    深度选择器 ：deep (元素 类 id 后代 伪类结构){}
    保证用深度选择器的时候样式必须是scoped 否则不生效
    scpoed 避免样式冲突
    如果不加scoped 子组件若是全局组件 y与之相同的元素样式优先于全局组件
                    若没有全局组件 ,与之相同的元素样式会优先于局部组件的样式

    建议每个组件加scpoed
*/
.p1{
 color: aqua;


}
h3{
    border: 5px solid red;
}
:deep(.h33){
    border: 5px solid yellow;
}
</style>